<template>
    <div class="page">
        <div class="bg-color-box">
            <!--顶部导航栏-->
            <van-nav-bar class="nav-bar-box" :left-arrow="true" @click-left="onClickLeft">
                <div slot="left">
                    <i class="go-back-icon"></i>
                    <span class="title">出入历史</span>
                </div>
            </van-nav-bar>
        </div>

        <!--出入列表-->
        <div class="module-box" v-for="(item,index) in this.recordData" :key="index">
            <div class="day-title">
                <span class="date">{{item[0].recordTime.slice(0,10)}}</span>

                <div class="address">{{item[0].name}}</div>
            </div>

            <div class="day-item" v-for="(item2,index) in item" :key="index">
                <div class="info-box">
                    <!--出入记录-->
                    <div class="out-in" v-if="item2.state == 'out'">
                        <i class="icon out-icon"></i>
                        <span>出</span>
                    </div>
                    <div class="out-in" v-else>
                        <i class="icon in-icon"></i>
                        <span>入</span>
                    </div>

                    <div class="time red">
                        <i class="clock-icon"></i>
                        <span>{{item2.recordTime.slice(11)}}</span>
                    </div>

                    <!--体温，有三种类型，正常、可疑、发烧-->
                    <div class="temp" :class="getTempClass(item2.temperature)">
                        <i class="temp-icon"></i>
                        <span>{{item2.temperature}}</span>
                    </div>
                </div>
            </div>
        </div>


        <div class="no-data" v-if="!this.recordData.length">暂无记录</div>

    </div>
</template>

<script>
	import {NavBar} from 'vant';

	export default {
		name: 'outInHistory',

		components: {
			[NavBar.name]: NavBar,
		},

		props: {},

		data() {
			return {
				recordData: [],
			}
		},

		mounted() {
			this.getOwnerHistory();
		},

		methods: {
			//获取体温class
			getTempClass(temperature){
                let temp = temperature.slice(0,4);

                if(temp >= 37 && temp < 38){
                	return 'yellow';

                }else if(temp >= 38){
					return 'red';
                }
            },

			//获取个人出行记录
			getOwnerHistory(){
				this.$axios.post(this.$api.queryTravelRecord, {
					phoneNumber: this.$Cookies.get('personPhone'),

				}).then(success => {
					if(success.data.code == '200'){
						this.formatData(success.data.data)
					}
				}).catch(error => {

				})
			},

            //按天格式化出行记录
			formatData(data){
				this.recordData = [];
				if(data.length == 0){
					return;
                }

                for(let item of data){
                	if(this.recordData.length == 0){
						this.recordData.push([item]);

                    }else if(item.recordTime.slice(0,10) == this.recordData[this.recordData.length - 1][0].recordTime.slice(0,10)){
						this.recordData[this.recordData.length - 1].push(item);

                    }else{
						this.recordData.push([item]);
                    }
                }
            },


			onClickLeft(){
				this.$router.go(-1);
			},

		},
	}
</script>

<style lang="scss" scoped>
    .no-data{
        text-align: center;
        font-size: 16px;
        color: #666666;
        margin-top: 50px;
    }

    .day-title{
        padding: 10px 16px;
        font-size: 16px;
        color: #222222;

        .address{
            float: right;
        }
    }

    .day-item{
        padding: 10px 16px;
        border-top: solid 1px #ededed;

        .info-box{
            text-align: center;
            font-size: 18px;
            color: #222222;

            .out-in{
                float: left;
                display: inline-block;
                padding: 4px 0;

                .icon{
                    display: inline-block;
                    width: 16px;
                    height: 16px;
                    vertical-align: middle;

                    &.out-icon{
                        background: url("../assets/images/out-icon.png") no-repeat;
                        background-size: cover;
                    }
                    &.in-icon{
                        background: url("../assets/images/in-icon.png") no-repeat;
                        background-size: cover;
                    }
                }
                span{
                    vertical-align: middle;
                }
            }

            .time{
                padding: 4px 0;
                display: inline-block;

                .clock-icon{
                    display: inline-block;
                    width: 15px;
                    height: 15px;
                    background: url("../assets/images/clock-icon.png") no-repeat;
                    background-size: cover;
                    vertical-align: middle;
                }
                span{
                    vertical-align: middle;
                }
            }

            .temp{
                float: right;
                width: 80px;
                padding: 4px 4px;
                border-radius: 6px;

                &.yellow{
                    background-color: #ffff00;
                }
                &.red{
                    background-color: #e90b0b;
                    color: white;

                    .temp-icon{
                        background: url("../assets/images/temp-white-icon.png") no-repeat;
                        background-size: cover;
                    }
                }

                .temp-icon{
                    display: inline-block;
                    width: 18px;
                    height: 18px;
                    background: url("../assets/images/temp-icon.png") no-repeat;
                    background-size: cover;
                    vertical-align: middle;
                }
                span{
                    vertical-align: middle;
                }
            }
        }

        .address{
            font-size: 15px;
            color: #222222;
            margin-top: 10px;
        }
    }

</style>

